<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>享送小哥</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>

<body>
    <div class="aui-content aui-margin-b-15 vue" style="margin-top:5px;">
        <ul class="aui-list u-set u-data">
            <li class="aui-list-item">
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-title">更换头像：</div>
                    <div class="aui-list-item-right data-user" @click="setAvatar">
                        <img :src="userInfo.avatar" onerror="../images/user.png">
                    </div>
                </div>
            </li>
            <li class="aui-list-item" @click="setName">
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-title">昵称：</div>
                    <div class="aui-list-item-right">{{userInfo.name}}</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner aui-padded-r-30">
                    <div class="aui-list-item-title">电话号码：</div>
                    <div class="aui-list-item-right">{{userInfo.phone}}</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner aui-padded-r-30">
                    <div class="aui-list-item-title">性别：</div>
                    <div class="aui-list-item-right">
                        <input class="sex-radio" type="radio" name="sex" id="sex1" :checked="userInfo.sex=='女'?true:false">
                        <label for="sex1" @click="setSex(2)"><img src="../images/woman.png">女</label>
                        <input class="sex-radio" type="radio" name="sex" id="sex2" :checked="userInfo.sex=='男'?true:false">
                        <label for="sex2" @click="setSex(1)"><img src="../images/man.png">男</label>
                    </div>
                </div>
            </li>
            <li class="aui-list-item" @click="setBirthday">
                <a href="javascript:;" class="aui-list-item-inner aui-list-item-arrow bor-bn">
                    <div class="aui-list-item-title">出生年月：</div>
                    <div class="aui-list-item-right">{{userInfo.birthday}}</div>
                </a>
            </li>
        </ul>
    </div>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/vue.js"></script>
    <script type="text/javascript" src="../script/app.js"></script>
    <script type="text/javascript">
        apiready = function() {

            var userInfo = api.pageParam.userInfo;

            vObj = new Vue({
                el: ".vue",
                data: {
                    userInfo: userInfo
                },
                methods: {
                    setBirthday: function() {
                        var defaultDate = vObj.userInfo.birthday || '1990-01-01';
                        api.openPicker({
                            type: 'date',
                            date: defaultDate,
                            title: '出生年月'
                        }, function(ret, err) {
                            if (ret) {
                                var birthday = ret.year + '-' + ret.month + '-' + ret.day;
                                app.request.post('Client/setUserInfo', {
                                    type: 'birthday',
                                    birthday: birthday
                                }, {}, function(res) {
                                    if (res.code == 200) {
                                        vObj.userInfo.birthday = birthday;
                                        vObj.sendUpdateEvent();
                                    } else {
                                        app.error(res.message);
                                    }
                                })
                            }
                        });
                    },
                    setSex: function(val) {
                        app.request.post('Client/setUserInfo', {
                            type: 'sex',
                            sex: val
                        }, {}, function(res) {
                            if (res.code == 200) {
                                vObj.sendUpdateEvent();
                            } else {
                                app.error(res.message);
                            }
                        })
                    },
                    setName: function() {
                        app.addEventListener('waitSetNameResult', function(ret, err) {
                            app.removeEventListener('waitSetNameResult')
                            vObj.userInfo.name = ret.value;
                            vObj.sendUpdateEvent();
                        });
                        app.page({
                            name: 'set_name',
                            url: 'set_name.html',
                            pageParam: {
                                name: vObj.userInfo.name
                            }
                        })
                    },
                    setAvatar: function() {
                        api.actionSheet({
                            cancelTitle: '取消',
                            buttons: ['相机拍摄', '相册选取']
                        }, function(ret, err) {
                            switch (ret.buttonIndex) {
                                case 1:
                                    api.getPicture({
                                        sourceType: 'camera',
                                        mediaValue: 'pic',
                                        allowEdit: true,
                                        quality: 50,
                                        targetWidth: 100,
                                        targetHeight: 100
                                    }, function(ret, err) {
                                        if (ret) {
                                            vObj.upload(ret);
                                        }
                                    });
                                    break;
                                case 2:
                                    api.getPicture({
                                        sourceType: 'album',
                                        mediaValue: 'pic',
                                        allowEdit: true,
                                        quality: 100,
                                        targetWidth: 300,
                                        targetHeight: 300
                                    }, function(ret, err) {
                                        if (ret) {
                                            vObj.upload(ret);
                                        }
                                    });
                                    break;
                                default:

                            }
                        });
                    },
                    upload: function(ret) {
                        app.request.post('Common/uploadImg', {
                            type: 'avatar'
                        }, {
                            image: ret.data
                        }, function(res) {
                            if (res.code == 200) {
                                app.request.post('Client/setUserInfo', {
                                    type: 'avatar',
                                    avatar: res.data.path
                                }, {}, function(a) {
                                    if (res.code == 200) {
                                        vObj.userInfo.avatar = res.data.full_path;
                                        vObj.sendUpdateEvent();
                                    } else {
                                        app.error(res.message);
                                    }
                                });
                            } else {
                                app.error(res.message);
                            }
                        });
                    },
                    sendUpdateEvent: function() {
                        api.sendEvent({
                            name: 'loginSuccess'
                        });
                    }
                }
            })
        }
    </script>
</body>

</html>
